/**
 * @description 我的好友
 */
import style from './styles/MyFriend.less';
import classnames from "classnames";
import React, { Component } from 'react';
import { Toast } from 'wd-mobile';
//img
import avator1 from "images/avatar/1.jpg";
import avator2 from "images/avatar/2.jpg";
import avator3 from "images/avatar/3.jpg";
import avator4 from "images/avatar/4.jpg";
import avator5 from "images/avatar/5.jpg";
import avator6 from "images/avatar/6.jpg";
import avator7 from "images/avatar/7.jpg";
import avator0 from "images/avatar/0.jpg";
const avatarArr = [avator0, avator1, avator2, avator3, avator4, avator5, avator6, avator7, avator0, avator1];

import { unfreeze_user, invite_count } from 'api_xukaiyu/app/user_invite'
class MyFriend extends React.Component {
    constructor() {
        super();
        this.state = {
            friendList: [],//好友列表
            page:1,
            inviteInfo: {}
        };
    }

    componentDidMount() {
        this.checkFriend();
        //查询邀请统计
        invite_count().then(data => {
            this.setState({
                inviteInfo: data.data || {}
            })
        })
    }

    checkFriend() {
        let {page,friendList}=this.state;
        //待解冻好友
        unfreeze_user({page:page,pageSize:10}).then(data => {
            this.setState({
                friendList: friendList.concat(data.data)
            })
        })
    }



    render() {
        let { friendList, inviteInfo,page } = this.state;
        return (<div className={style.MyFriend}>
            <div className={style.header}>
                <div className={style.waitFriend}>
                    <div className={style.title}>待解冻好友数</div>
                    <div className={style.num}>{inviteInfo.freezingCount}<span>人</span></div>
                </div>
                <div className={style.waitRed}>
                    <div className={style.title}>待解冻红包</div>
                    <div className={style.num}>{inviteInfo.freezingAmount || 0}<span>元</span></div>
                </div>
            </div>
            <div className={style.friendList}>
                <div className={style.header}>
                    <div className={style.title}>我的好友</div>
                    <div className={style.tip}>邀请好友下首单 解冻大额红包</div>
                </div>
                <div className={style.List}>
                    {
                        friendList.length ? friendList.map((item, index) => {
                            return <div key={index} className={style.friendItem}>
                                <div className={style.friendImg}><img src={avatarArr[item.slice(item.length-1)]} alt="" /></div>
                                <div className={style.friendInfo}>
                                    <div className={style.name}>{item}</div>
                                    <div className={style.status}>未下单</div>
                                </div>
                                <div className={style.recommend}>
                                    <div className={style.awardInfo} onClick={() => {
                                        location.href = './fightRedEnvelope.html#/Invite'
                                    }}>推荐好券</div>
                                </div>
                            </div>
                        }) : <div className={style.nodata}>暂无数据</div>
                    }
                    <div className={style.moreData} hidden={page*10>friendList.length}>加载更多</div>
                </div>
            </div>
            <div className={style.bottomLogo}></div>
        </div>
        );
    }
}

export default MyFriend;